<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>所在地区</span>
              <el-cascader
                class="tel-value"
                v-model="params_list.address"
                :options="options"
                :props="props"
                @change="handleChange">
              </el-cascader>
            </div>
            <div class="item-inline">
              <span>司机姓名</span>
              <el-input class="tel-value" v-model="params_list.drivername" placeholder="请输入客户名称"></el-input>
            </div>
            <div class="item-inline">
              <span>司机手机号</span>
              <el-input class="tel-value" v-model="params_list.driverphone" placeholder="请输入客户名称"></el-input>
            </div>
            <div class="item-inline">
              <span>客户姓名</span>
              <el-input class="tel-value" v-model="params_list.username" placeholder="请输入客户名称"></el-input>
            </div>
            <div class="item-inline">
              <span>客户手机号</span>
              <el-input class="tel-value" v-model="params_list.userphone" placeholder="请输入客户名称"></el-input>
            </div>
            <div class="item-inline">
              <span>下单开始时间</span>
              <el-date-picker
                class="tel-value"
                v-model="params_list.start"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择订单开始时间"
                align="right">
              </el-date-picker>
            </div>
            <div class="item-inline">
              <span>订单结束时间</span>
              <el-date-picker
                class="tel-value"
                v-model="params_list.end"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择订单结束时间"
                align="right">
              </el-date-picker>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          救援订单列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" :loading="boo.isExport" @click="exportRow">{{boo.isExport ? '请稍后……' : '导出'}}</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="no" label="救援单号" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="name" label="客户姓名/手机号" width="130" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          
          <el-table-column prop="plate" label="车牌号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="所在地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="plate" label="救援商家" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="plate" label="救援项目" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="start" label="下单时间" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="end" label="订单完成时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="start" label="支付时间" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="price" label="订单费用" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="status" label="订单状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">待接单</span>
              <span v-else-if="scope.row.status == 1">已完成</span>
              <span v-else-if="scope.row.status == 2">待支付</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
           <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="list.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
  import list from 'static/json/order/insurance.json'
	export default {
		data() {
			return {
        https: {
          list: '',
          common: this.$api.common
        },
        boo: {
          loading: false,
          isExport: false,
        },
        other: {
          allRow: 1,
        },
        list: list,
        params_list: {
          page: 1,
          size: 10,
          drivername: '',
          driverphone: '',
          start: '',
          end: '',
          status: '',
          username: '',
          userphone: '',
          address: '',
          no: '', //救援单号
        },
        props: {
          expandTrigger: 'click', 
          value: 'field',
          label: 'field',
        },
        options: [],
        statuslist: '',
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getAddress()
      _self.getDict('shopOrderStatus')
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['shopOrderStatus',()=>{
              _self.statuslist = list
            }],
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.dict, params, success) 
      },
      getAddress(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.options = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.address, {}, success) 
      },
      getList(){},
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        // console.log("=====");
        // if(!_self.$reg.isPhone(_self.params_list.driverphone)){
        //   _self.$message.error('号码格式不正确')
        // }
        console.log(_self.params_list);
        
      },
      exportRow(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 92px
</style>
